<template>
    <!--    <div>-->
    <!--        <center>-->
    <!--            <h1>HG Shopping Center Background Management System</h1>-->
    <!--        </center>-->
    <!--        <HeaderBackgroundManagement></HeaderBackgroundManagement>-->
    <!--        <div id="v-content" v-bind:style="{minHeight: Height+'px'}">-->
    <!--            <router-view/>-->
    <!--        </div>-->
    <!--        <footer class="foot">-->
    <!--            <p><B>本站已经运行了：{{momk}}</B></p>-->
    <!--            <p><B>Copyright © 2023 HG.</B></p>-->
    <!--        </footer>-->
    <!--    </div>-->
    <el-container style="height: 900px">
        <el-header>
            <span class="dis"> HG Shopping Center Background Management System
            </span>
            <el-popover
                    placement="top-start"
                    width="200"
                    trigger="click">
                <p>当前用户： {{username}}</p>
                <p @click="logout()">退出登录</p>
                <el-button type="primary" icon="el-icon-user-solid" slot="reference" style="float: right"></el-button>
            </el-popover>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <HeaderBackgroundManagement></HeaderBackgroundManagement>
            </el-aside>
            <el-container>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
        <el-footer style="height: 80px;">
            <div class="foot">
                <p><B>本站已经运行了：{{momk}}</B></p>
                <p><B>Copyright © 2023 HG.</B></p>
            </div>
        </el-footer>
    </el-container>
</template>
<script>
    import HeaderBackgroundManagement from "./components/Header-Background-Management";
    import HomeBackgroundManagement from "./components/Home-Background-Management"

    export default {
        name: "App",
        components: {HeaderBackgroundManagement, HomeBackgroundManagement},
        data() {
            return {
                momk: '',
                username: '',
            };
        },
        created() {
            this.username = sessionStorage.getItem("username")
            //动态设置内容高度 让footer始终居底   header+footer的高度是100
            this.Height = document.documentElement.clientHeight - 100;
            //监听浏览器窗口变化　
            window.onresize = () => {
                this.Height = document.documentElement.clientHeight - 100
            },
                setInterval(() => {
                    this.showDataTime();
                }, 1000)
        },
        mounted() {

        },
        methods: {
            logout(){
                sessionStorage.removeItem("username")
            },
            createLoves() {
                this.$refs.WelCome.createLoves(event)
            },
            removeSmallHert() {
                this.$refs.WelCome.removeSmallHert()
            },
            showDataTime() {
                let BirthDay = new Date("01/31/2023 11:11:11");
                let today = new Date();
                let timeOld = (today.getTime() - BirthDay.getTime());
                let sectimeold = timeOld / 1000
                let msPerDay = 24 * 60 * 60 * 1000
                let e_daysold = timeOld / msPerDay
                let daysold = Math.floor(e_daysold);
                let e_hrsold = (daysold - e_daysold) * -24
                let hrsold = Math.floor(e_hrsold);
                let e_minsold = (hrsold - e_hrsold) * -60
                let minsold = Math.floor((hrsold - e_hrsold) * -60)
                let seconds = Math.floor((minsold - e_minsold) * -60)
                let momk = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒"
                this.momk = momk
            }
        },
        beforeDestroy() {
            if (this.showDataTime()) {
                clearInterval(this.showDataTime());
            }
        },
    };

</script>
<style>
    .foot {
        text-align: center;
        /*background-color: #F8F9FA;*/
        /*margin-top: 10px;*/
        font-size: 14px;
        font-family: Arial, Tahoma, Verdana, Century Gothic;
    }

    .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 20px;
    }

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 50px;
    }

    .el-aside {
        /*background-color: #D3DCE6;*/
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        /*text-align: center;*/
        /*line-height: 160px;*/
    }

    body > .el-container {
        margin-bottom: 20px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .dis {
        margin-left: 600px;
        font-size: 24px;
        font-weight: bold;
        margin-top: 50px;
    }
</style>
